<template>
  <div class="container">
    <div class="weui_panel weui_panel_access">
      <div class="weui_panel_bd">
        <div class="weui_media_box weui_media_appmsg" style="padding-top:5px;">
          <div class="weui_media_hd">
            <img :src="doctorPhotoUrl" alt="icon" style="width:90px;height:100px;margin-right:15px;display:block">
          </div>
          <div class="weui_media_bd" style="margin-left:30px;margin-top:30px;">
            <h4 class="weui_media_title">{{doctorName}}</h4>
            <p class="weui_media_desc">{{deptName}}</p>
          </div>
        </div>
      </div>
    </div>
    <div id="scroll-wrapper" class="scroll-wrapper">
      <div class="scroller">
        <div class="weui_cells_title">{{selectionTip}}</div>
        <div class="weui_cells weui_cells_access">
          <a v-for="tp in schedules" class="weui_cell" href="javascript:;" @click="goToDocdorSpan($index)">
            <div class="weui_cell_hd">
              <i class="fa fa-calendar icon-color" style="width:20px;margin-right:5px;display:block;"></i>
            </div>
            <div class="weui_cell_bd weui_cell_primary">
              <p>{{tp.bookDate}} <span style="margin-left:8px;" class="blue_tag">剩 {{tp.leaveCount}}</span></p>
            </div>
            <div class="weui_cell_ft">
            </div>
          </a>
        </div>
        <partial name="footer-copyright"></partial>
      </div>
    </div>
  </div>
</template>
<style scoped>
.weui_panel {
  position: absolute;
  height: 120px;
  width: 100%;
  top: 0;
  left: 0;
}

.scroll-wrapper {
  position: absolute;
  top: 120px;
  left: 0;
  width: 100%;
  bottom: 0;
  overflow: hidden;
}

.scroller {
  position: absolute;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  width: 100%;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -o-text-size-adjust: none;
  text-size-adjust: none;
}

.blue_tag {
  background-color: #0ae;
  color: #fff;
  font-size: 13px;
  padding: 2px 4px;
  border: none;
  vertical-align: middle;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.orange_tag {
  background-color: #ff8208;
  color: #fff;
  font-size: 13px;
  padding: 2px 4px;
  border: none;
  vertical-align: middle;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
</style>
<script>
import { iScroll as IScroll } from '../../assets/lib/iscroll4/iscroll'
import { setBookSchedule } from '../../vuex/actions'
import _ from 'underscore'

export default {
  name: 'BookDoctorScheduleView',
  vuex: {
    actions: {
      setBookSchedule
    }
  },
  data: function () {
    return {
      deptId: this.$route.query.deptId,
      deptName: this.$route.query.deptName,
      doctorId: this.$route.query.doctorId,
      doctorName: this.$route.query.doctorName,
      regType: this.$route.query.regType,
      doctorPhotoUrl: '',
      schedules: [],
      selectionTip: '请选择预约日期'
    }
  },
  methods: {
    goToDocdorSpan: function (idx) {
      var schedule = this.schedules[idx]
      this.setBookSchedule(this.deptId, this.deptName, this.doctorId, this.doctorName, this.doctorPhotoUrl, schedule.regType, schedule.regAmt, schedule.subjectId, schedule.subjectName, schedule.bookDate, schedule.parentScheduleId, schedule.startTime, schedule.endTime)
      this.$router.go({
        name: 'bookDoctorTimeTable'
      })
    }
  },
  ready: function () {
    var myScroll = new IScroll('scroll-wrapper', { hScroll: false, vScroll: true, hScrollbar: false, vScrollbar: false })
    this.iscroll = myScroll

    var self = this
    this.$ajax.get('GetBookDoctorScheduleList', 'Book', {
      deptId: this.deptId,
      doctorId: this.doctorId,
      doctorName: this.doctorName,
      regType: this.regType
    }).then(function (data) {
      self.doctorPhotoUrl = data.DoctorPic
      self.schedules = _.map(data.Schedules, function (val) {
        return {
          parentScheduleId: val.ScheduleId,
          subjectId: val.SubjectId,
          subjectName: val.SubjectName,
          regType: val.RegType,
          regAmt: val.RegAmt,
          bookDate: val.StartTime.substr(0, 10),
          startTime: val.StartTime,
          endTime: val.EndTime,
          leaveCount: val.LeaveCount
        }
      })

      if (self.schedules.length === 0) {
        self.selectionTip = '已约满'
      }

      self.$nextTick(function () {
        self.iscroll.refresh()
      })
    })
  },
  iscroll: null
}
</script>
